<template>
    <el-drawer v-model="drawer" :lock-scroll="false" :close-on-click-modal="false">
        <template #header>
            <h4>修改公告</h4>
        </template>
        <template #default>
            
            <el-form  label-width="120px" class="form-box">
                <el-form-item label="标题">
                    <el-input v-model="title" placeholder="请输入公告标题" />
                </el-form-item>
                <el-form-item label="内容">
                    <el-input v-model="content" placeholder="请输入公告内容" />
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="addSubmitHandler(def.id as number,title as string,content as string)">修改</el-button>
                <el-button type="" @click="closeHandler">取消</el-button>
            </div>
        </template>
    </el-drawer>
</template>
<script setup lang='ts'>
import { ref, reactive, defineProps } from 'vue'
import { updateNoticeApi } from '@/api/notice'
import { ElMessage } from 'element-plus'
const drawer = ref<boolean>(false)

// 打开抽屉
const openDrawer = () => {
    drawer.value = true
}

// 获取对应参数
const def = defineProps({
    id: Number,
    title: String,
    content: String
})

// 关闭抽屉
const closeHandler = () => {
    drawer.value = false
}
const title = ref()

const content = ref()
// 添加
const addSubmitHandler = (id:number,title:string,content:string) => {
    updateNoticeApi(id,title,content).then(res => {
        if(res.data.data){
            closeHandler();
            ElMessage({
                type : 'success',
                message : '修改成功'
            })
        }
        
    })
}

defineExpose({
    openDrawer
})
</script>
<style lang='scss' scoped>
.form-box {
    width: 100%;
    padding-top: 200px;
}
</style>